import React from 'react';
import classNames from 'classnames';
import { Link } from 'react-router';

import {
  Row,
  Col
} from 'react-bootstrap';

import * as Shell from '../common/Shell';
import * as Apis from '../config/Apis';
import Notify from '../common/Notification';

class Market extends React.Component {

  constructor() {
    super();
  }

  static propTypes = {
      markets : React.PropTypes.array
  }

  static defaultProps = {
      markets : []
  }

  openExternalLink(url){
    let params = { url, showCloseBtn : true, title: '在线行情' };
    Shell.callShellMethod("webViewPlugin", null, null, params );
  }

  renderMarketItem(data){

      let isHappy = (parseFloat(data.change) >= 0 ? true : false);
      let happyClass = {
          "text-success": !isHappy,
          "text-danger": isHappy
      };
      let currentClass = classNames( "market-current", happyClass );
      let changeClass = classNames( "market-detail", happyClass );

      let indexMarketApi = String.format(Apis.indexMarketApi, data.area, data.code);

      return (
          <Col xs={4}>
            <a onClick={this.openExternalLink.bind(this, indexMarketApi)}>
              <div className="market text-center">
                 <h4 className="market-name">{data.name}</h4>
                 <h4 className={currentClass}>{data.current}</h4>
                 <div className={changeClass}>
                    <span>{(data.change=="-0.00")?"0.00":data.change}</span>
                    <span>{`${(parseFloat(data.rate) * 100).toFixed(2)}%`}</span>
                 </div>
              </div>
            </a>
          </Col>
      );
  }

  render() {

    let { markets } = this.props;

    return (
        markets && markets.length>0 ?
        <Row className="market-container">
            { markets.map((item, index)=>{
              return this.renderMarketItem(item);
            }) }
        </Row>
        :
        null
    );
  }
}

export default Market;
